<template>
  <a-step
    :description="description"
    :disabled="disabled"
    :icon="icon"
    :status="status"
    :sub-title="subTitle"
    :title="title"
  >
    <slot />
    <template v-if="$slots.description" #description>
      <slot name="description" />
    </template>
    <template v-if="$slots.icon" #icon>
      <slot name="icon" />
    </template>
    <template v-if="$slots.subTitle" #subTitle>
      <slot name="subTitle" />
    </template>
    <template v-if="$slots.title" #title>
      <slot name="title" />
    </template>
  </a-step>
</template>
<script>
import { defineComponent } from 'vue'
import { Step } from 'ant-design-vue'
export default defineComponent({
  name: 'ZStep',
  components: {
    AStep: Step
  },
  props: {
    description: {
      type: String,
      default: undefined
    },
    disabled: {
      type: Boolean,
      default: false
    },
    icon: {
      type: String,
      default: undefined
    },
    status: {
      type: String,
      default: 'wait'
    },
    subTitle: {
      type: String,
      default: undefined
    },
    title: {
      type: String,
      default: undefined
    }
  }
})
</script>
